<template>
    <div id="app">
        <div class="wrap">
            <div class="header">
                <img src="static/login/image/login-logo.png"/>
            </div>
            <div class="main">
                <div class="left-bg">
                    <img src="static/login/image/iw.png"/>
                    <ul id="ulMsg">
                        <li v-for="item in ulMsg">&nbsp;{{item}}</li>
                    </ul>
                </div>
                <div class="login-outer">
                    <p class="login-title">登录</p>
                    <div class="login-form">
                        <div class="yin">
                            <img src="static/login/image/y.png"/>
                        </div>
                        <div class="form-box">
                            <div class="username-box">
                                <input id="menuCode" type="hidden" value="0">
                                <div class="input-box">
                                    <el-input v-model="userCode" placeholder="请输入用户账号" />
                                    <i class="input-icon username-icon"/>
                                </div>
                            </div>
                            <div class="password-box">
                                <div class="input-box">
                                    <el-input v-model="userPswd" placeholder="请输入用户密码" />
                                    <i class="input-icon password-icon"></i>
                                </div>
                            </div>
                            <div id="login-tip" style="height: 45px;line-height: 45px;font-size: 15px;">
                                <span class="warning" v-show="showWarning">{{warning}}</span>
                            </div>
                            <div class="login-button" id="btnLogin">
                                <a href="javascript:void(0);" @click="login">登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="copyright" id="copyright">Copyright © 2017-2018 智业软件股份有限公司</div>
        </div>
    </div>
</template>
<style>
    img {
        vertical-align: top;
    }

    body {
        width: 100%;
        height: 100%;
        background: url("/static/login/image/bg.png");
        background-size: cover;
    }

    .input-box .el-input--mini .el-input__inner {
        border: 0;
        height: 35px;
        line-height: 35px;
    }

    .login-button .el-button {
        text-align: center;
        background: transparent;
        font-size: 20px;
        color: #fff;
        line-height: 50px;
        border: 0;
    }

    .login-button .el-button:hover {
        background: transparent;
        color: #fff;
    }
</style>
<script>

    export default {
        name: 'login',
        data() {
          return {
              ulMsg: ['统一医院外联服务', '统一线上线下服务', '统一财务对账管理'],
              userCode: '',
              userPswd: '',
              warning: '',
              showWarning: false
          }
        },
        methods: {
            login() {
                if (!this.userCode || !this.userPswd) {
                    this.showWarning = true;
                    this.warning = '用户名或密码不能为空';
                } else{
                    this.showWarning = false;
                    this.warning = '';
                    let data = {'username': this.userCode, 'password': this.userPswd};
                    this.$http.postH('/login/check', data, (result) => {
                        if (result.status == 200){
                            window.location.href = "/admin";
                        } else {
                            this.showWarning = true;
                            this.warning = '用户名或密码出错';
                        }
                    }, (error) => {
                        this.showWarning = true;
                        this.warning = error;
                    });
                }
            }
        }
    }
</script>